<template id="tpl-dsopt-media">
	<fieldset class="form-fieldset mb-0">
		<div class="mb-4 row">
			<label class="col-4 col-form-label">Owner</label>
			<div class="col">
				<select class="media-owner form-select" placeholder="Name or contact info">
				</select>
				<div class="small form-hint">
					Select the person whose media data this is.
				</div>
			</div>
		</div>
		<div class="mb-4 row">
			<label class="col-4 fw-medium">Albums</label>
			<div class="col">
				<label class="form-check mb-1">
					<input class="media-folder-is-album form-check-input" type="checkbox">
					<span class="form-check-label">Each folder is an album</span>
				</label>
				<div class="small form-hint">
					Treat folders as album names and organize media items accordingly
				</div>
			</div>
		</div>
		<div class="mb-4 row">
			<label class="col-4 fw-medium">Timestamps</label>
			<div class="col">
				<label class="form-check mb-1">
					<input class="media-use-file-path-time form-check-input" type="checkbox" checked>
					<span class="form-check-label">Use date from filepath</span>
				</label>
				<div class="small form-hint">
					Find dates in folder names or the filename if no embedded timestamp is found.
				</div>

				<label class="form-check mb-1 mt-3">
					<input class="media-use-file-mod-time form-check-input" type="checkbox">
					<span class="form-check-label">Use file mod time</span>
				</label>
				<div class="small form-hint">
					Use file modification time if no better timestamp is found.
				</div>
			</div>
		</div>
		<div class="mb-3 row">
			<label class="col-4 col-form-label">Expected date range</label>
			<div class="col">
				<div class="row">
					<div class="col-4">
						<input type="text" class="media-start-year form-control mb-2" placeholder="Start year"
							maxlength="4">
					</div>
					<div class="col-1 col-form-label">
						&mdash;
					</div>
					<div class="col-4">
						<input type="text" class="media-end-year form-control mb-2" placeholder="End year"
							maxlength="4">
					</div>
				</div>
				<div class="row">
					<div class="small form-hint">
						If choosing between multiple timestamps, prefer dates in this range.
					</div>
				</div>
			</div>
		</div>
	</fieldset>
</template>


<template id="tpl-modal-import-dsopt">
	<div class="modal modal-lg modal-blur fade" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">
						<span class="avatar avatar-sm align-middle me-2"></span>
						
					</h5>
				</div>
				<div class="modal-body">
					
				</div>
				<div class="modal-footer">
					<button class="btn btn-green" data-bs-dismiss="modal">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
							stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
							class="icon icon-tabler icons-tabler-outline icon-tabler-device-floppy">
							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
							<path d="M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2" />
							<path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
							<path d="M14 4l0 4l-6 0l0 -4" />
						</svg>
						Save for this import
					</button>
				</div>
			</div>
		</div>
	</div>
</template>




<template id="tpl-dsopt-smsbackuprestore">
	<div class="mb-3">
		<div class="row">
			<div class="col-auto">
				<span class="avatar avatar-md" style="background-image: url(./static/avatars/002m.jpg)"></span>
			</div>
			<div class="col">
				<div class="mb-3">
					<label class="form-label required">Your phone number</label>
					<input type="text" class="smsbackuprestore-owner-phone form-control" placeholder="123-456-7890"
						required>
					<small class="form-hint">Type the phone number of the owner of this file.</small>
				</div>
			</div>
		</div>
	</div>
</template>

<template id="tpl-dsopt-google_location">
	<fieldset class="form-fieldset mb-0">
		<div class="mb-3 row">
			<label class="col-4 col-form-label required">Person</label>
			<div class="col">
				<select class="google_location-owner form-select" placeholder="Name or contact info">
				</select>
				<div class="small form-hint">
					Select the person whose location data this is.
				</div>
			</div>
		</div>
		<div class="mb-3 row">
			<label class="col-4 col-form-label">Simplification</label>
			<div class="col">
				<div class="google_location-simplification form-range mb-2 mt-2"></div>
				<div class="small form-hint">
					Reduce the size of the data set by dropping unimportant points
					(after denoising and clustering).
					Lower values keeps more data by dropping only those on straight paths,
					whereas higher values drops more points.
					A value of 0 means that no points will be discarded, resulting in a
					large data set.
					A value of 10 means that almost every point except those at the
					ends of paths will be discarded.
				</div>
			</div>
		</div>
	</fieldset>
</template>

<template id="tpl-dsopt-gpx">
	<fieldset class="form-fieldset mb-0">
		<div class="mb-3 row">
			<label class="col-4 col-form-label required">Person</label>
			<div class="col">
				<select class="gpx-owner form-select" placeholder="Name or contact info">
				</select>
				<div class="small form-hint">
					Select the person whose location data this is.
				</div>
			</div>
		</div>
		<div class="mb-3 row">
			<label class="col-3 col-form-label">Simplification</label>
			<div class="col">
				<div class="gpx-simplification form-range mb-2 mt-2"></div>
				<div class="small form-hint">
					Reduce the size of the data set by dropping unimportant points
					(after denoising and clustering).
					Lower values keeps more data by dropping only those on straight paths,
					whereas higher values drops more points.
					A value of 0 means that no points will be discarded, resulting in a
					large data set.
					A value of 10 means that almost every point except those at the
					ends of paths will be discarded.
				</div>
			</div>
		</div>
	</fieldset>
</template>

<template id="tpl-dsopt-geojson">
	<fieldset class="form-fieldset mb-0">
		<div class="mb-3 row">
			<label class="col-3 col-form-label required">Person</label>
			<div class="col">
				<select class="geojson-owner form-select" placeholder="Name or contact info">
				</select>
				<div class="small form-hint">
					Select the person whose location data this is.
				</div>
			</div>
		</div>
		<div class="mb-3 row">
			<label class="col-3 col-form-label">Options</label>
			<div class="col">
				<label class="form-check mb-1">
					<input class="geojson-lenient form-check-input" type="checkbox">
					<span class="form-check-label">Lenient mode</span>
				</label>
				<div class="small form-hint">
					Useful, if the source data is non-spec-compliant.
				</div>
			</div>
		</div>
		<!-- todo: simplification -->
	</fieldset>
</template>

<template id="tpl-dsopt-icloud">
	<fieldset class="form-fieldset mb-0">
		<div class="mb-4 row">
			<label class="col-4 col-form-label">Owner</label>
			<div class="col">
				<select class="icloud-owner form-select" placeholder="Name or contact info">
				</select>
				<div class="small form-hint">
					Select the person whose iCloud data this is.
				</div>
			</div>
		</div>
		<div class="mb-4 row">
			<label class="col-4 fw-medium">Recently deleted</label>
			<div class="col">
				<label class="form-check mb-1">
					<input class="icloud-recently-deleted form-check-input" type="checkbox">
					<span class="form-check-label">Import recently deleted items</span>
				</label>
				<div class="small form-hint">
					By default, deleted content is not imported. If checked, recently deleted photos and videos will
					also be included in the import.
				</div>
			</div>
		</div>

	</fieldset>
</template>

<template id="tpl-dsopt-email">
	<fieldset class="form-fieldset mb-0">
		<div class="mb-3 row">
			<label class="col-4 col-form-label">Labels to skip</label>
			<div class="col">
				<input class="email-skip-labels" value="Spam,Trash,Chat" autocomplete="off" placeholder="Type label">
				<div class="small form-hint mt-2">
					Gmail labels to skip
				</div>
			</div>
		</div>
	</fieldset>
</template>

<template id="tpl-dsopt-generic">
	<div class="mb-3">
		<label class="form-label">Person</label>
		<select class="generic-owner form-select" placeholder="Name or contact info">
		</select>
		<small class="form-hint">Select the person to whom this data belongs (recommended).</small>
	</div>
</template>


<template id="tpl-dsopt-calendar">
	<div class="mb-3">
		<label class="form-label">Person</label>
		<select class="calendar-owner form-select" placeholder="Name or contact info">
		</select>
		<small class="form-hint">Select the owner of the calendar(s).</small>
	</div>
</template>

















<div class="modal modal-blur fade" id="modal-disconnected" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-status bg-danger"></div>
			<div class="modal-body py-4">
				<div class="text-center">
					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
						stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
						class="icon mb-2 text-danger icon-lg">
						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
						<path d="M12 9v4" />
						<path
							d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z" />
						<path d="M12 16h.01" />
					</svg>
					<h3 class="text-danger">Reconnecting...</h3>
				</div>
				<p class="mb-0">
					The connection with the server has been lost. Ensure the application is running (at the same address in the URL bar).
				</p>
			</div>
			<div class="modal-footer text-secondary justify-content-center text-center">
				<p>
					This message will disappear when the server is working again.
				</p>
			</div>
		</div>
	</div>
</div>
























<div id="modal-merge-entity" class="modal modal-blur fade" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Merge entities</h5>
				<button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div class="modal-body">

				<div class="row">
					<label class="col-2 col-form-label required">Merge:</label>
					<div class="col">
						<select type="text" class="entity-merge form-select">
						</select>
						<!-- <small class="form-hint">This entity, along with its attributes, will be joined into the other one, effectively deleting this one.</small> -->
					</div>
				</div>
				<div class="row my-2">
					<div class="col-2"></div>
					<div class="col">
						<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-down-square"
							width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
							fill="none" stroke-linecap="round" stroke-linejoin="round">
							<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
							<path d="M12 7v14"></path>
							<path d="M9 18l3 3l3 -3"></path>
							<path d="M14 3v4h-4v-4z"></path>
						</svg>
					</div>
				</div>
				<div class="row">
					<label class="col-2 col-form-label required">Into:</label>
					<div class="col">
						<select type="text" class="entity-keep form-select">
						</select>
					</div>
				</div>

			</div>
			<div class="modal-footer">
				<a class="btn btn-link link-secondary" data-bs-dismiss="modal">
					Cancel
				</a>
				<a id="do-entity-merge" class="btn btn-primary disabled ms-auto" data-bs-dismiss="modal">
					Merge
				</a>
			</div>
		</div>
	</div>
</div>